<template>
  <div class="right">
    <div class="nav-title"><span></span>
      <p>菜单管理</p>
    </div>
    
    <div class="dataList">
      <div class="from">
        <el-form
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              plain
              style="float:right;"
              @click="addHandler()"
            >新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <!-- columns表示所有的列，tree-structure表示数据格式，data-source表示实际的列表数据，deleteCate处理删除操作，showForm处理编辑操作，refresh处理刷新操作 -->
        <tree-grid
          :columns="columns"
          :tree-structure="true"
          :data-source="dataSource"
          @delete="deleteHandler"
          @showForm="showEditForm"
          @refresh="initList"
        ></tree-grid>

      </div>
    </div>
    <!-- 新增功能 -->
    <div>
      <el-dialog
        title="新增功能"
        :visible.sync="dialogAddVisible"
      >
        <el-form
          :model="amenu"
          ref="menuform4Add"
          :rules='rules'
        >
          <el-form-item
            label="新增类型"
            :label-width="formLabelWidth"
            prop='moduletype'
          >
            <el-radio-group v-model="moduletype">
              <el-radio :label="0">菜单</el-radio>
              <el-radio :label="1">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="父级菜单"
            :label-width="formLabelWidth"
            prop='selectedOptions4Add'
          >
            <div class="block">
              <el-cascader
                :options="options4Add"
                v-model="selectedOptions4Add"
                change-on-select
                @change="handleChange"
                :props="menuProps"
              >
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item
            label="菜单名称"
            :label-width="formLabelWidth"
            prop='modulenm'
          >
            <el-input
              v-model="amenu.modulenm"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地址"
            prop='url'
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="amenu.url"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if='this.moduletype == 0'
            prop='opentype'
            label="打开方式"
            :label-width="formLabelWidth"
          >
            <el-radio-group v-model="opentype">
              <el-radio :label="0">系统内置</el-radio>
              <el-radio :label="1">iframe</el-radio>
              <el-radio :label="2">页面窗口</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="图标"
            :label-width="formLabelWidth"
          >
            <el-upload
              class="upload-demo"
              :action="upurl"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="asuccess"
              :file-list="fileList2"
              :limit="1"
              list-type="picture"
            >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件1个，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="amenu.nt"
            ></el-input>
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogAddVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitMenu4Add"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
   
    <!-- 修改菜单 -->
    <div>
      <el-dialog
        title="编辑功能"
        :visible.sync="dialogEditVisible"
      >
        <el-form
          :model="emenu"
          ref="menuform4Edit"
          :rules='rules'
        >
          <el-form-item
            label="新增类型"
            :label-width="formLabelWidth"
            prop='moduletype'
          >
            <el-radio-group v-model="emoduletype">
              <el-radio :label="0">菜单</el-radio>
              <el-radio :label="1">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="父级菜单"
            :label-width="formLabelWidth"
          >
            <div class="block">
              <el-cascader
                :options="options4Edit"
                v-model="selectedOptions4Edit"
                @change="handleChange"
                :props="menuProps4Edit"
                 change-on-select
              >
              </el-cascader>
            </div>

          </el-form-item>
          <el-form-item
            label="菜单名称"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="emenu.modulenm"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="地址"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="emenu.url"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if='this.emoduletype !==1'
            prop='opentype'
            label="打开方式"
            :label-width="formLabelWidth"
          >
            <el-radio-group v-model="eopentype">
              <el-radio :label="0">系统内置</el-radio>
              <el-radio :label="1">iframe</el-radio>
              <el-radio :label="2">页面窗口</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="图标"
            :label-width="formLabelWidth"
          >
            <el-upload
              class="upload-demo"
      
              :action="upurl"
              :on-preview="ehandlePreview"
              :on-remove="ehandleRemove"
              :file-list="efileList2"
              :on-success="esuccess"
              :limit="1"
              list-type="picture"
            >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >只能上传jpg/png文件1个，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="emenu.nt"
            ></el-input>
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogEditVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitMenu4Edit"
          >确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import TreeGrid from "@/components/page/TreeGrid.vue";
import {getPidArr} from '@/components/utils/index.js'
import { getModules, saveModule, editModule, downloadUrl,uploadUrl } from "@/components/api/api.js";
export default {
  data() {
    return {
      upurl: uploadUrl,
      dimg:downloadUrl,
      moduletype: 0,
      opentype: 0,
      emoduletype: 0,
      eopentype: 0,
      menuProps: {
        value: "id",
        label: "text"
      },
      menuProps4Edit: {
        value: "id",
        label: "text"
      },
      propsDefine: {
        value: "id",
        label: "text"
      },
      menuList: [],
      emenuList: [],
      selectedOptions4Add: [],
      selectedOptions4Edit: [],
       options: [{
          value: '89BDF483A03D48E78E98500F839C66D0',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
          }]
       }],
      eselectedOptions: [],
      dataSource: [],
      columns: [
        {
          text: "功能名称",
          dataIndex: "text",
          width: 500
        },
        {
          text: "地址",
          dataIndex: "url"
        }
      ],

      fileList2: [],
      efileList2: [],
      options4Add: [],
      options4Edit: [],
      amenu: {
        modulenm: "",
        nt: "",
        parentid: "",
        opentype: "",
        moduletype: "",
        url: "",
        icon: ""
      },
      emenu: {
        moduleid: "",
        modulenm: "",
        nt: "",
        parentid: "",
        opentype: "",
        url: "",
        icon: ""
      },
      rules: {
        moduletype: [
          { required: false, message: "请选择新增类型", trigger: "change" }
        ],
        selectedOptions4Add: [
          { required: false, message: "请选择父级菜单", trigger: "change" }
        ],
        modulenm: [
          { required: true, message: "请输入菜单名称", trigger: "blur" }
        ],
        url: [{ required: true, message: "请输入地址", trigger: "blur" }],
        opentype: [
          { required: false, message: "请选择打开方式", trigger: "change" }
        ],
        nt: [{ required: false, message: "请输入备注", trigger: "blur" }]
      },
      dialogAddVisible: false,
      dialogEditVisible: false,
      formLabelWidth: "120px",
      tableData: []
    };
  },
  methods: {
    asuccess(file) {
      this.amenu.icon = file.result[0].fileObjectId;
      this.$message({
        message: "文件上传成功",
        type: "success"
      });
    },
    esuccess(file) {
      this.emenu.icon = file.result[0].fileObjectId;
      this.$message({
        message: "文件上传成功",
        type: "success"
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleChange(value) {
      console.log(value);
    },
    ehandleRemove(file, fileList) {
      this.efileList2 = [];
    },
    ehandlePreview(file) {
      console.log(file);
    },
    ehandleChange(value) {
      console.log(value);
    },
    addHandler() {
      this.options4Add = [];
      getModules()
        .then(res => {
          this.options4Add.push(res.result);
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "加载失败"
          });
        });
      if (this.$refs["menuform4Add"] !== undefined) {
        this.$refs["menuform4Add"].resetFields();
      }
      this.dialogAddVisible = true;
    },
    submitMenu4Add() {
      // 新增提交菜单
      this.$refs["menuform4Add"].validate(valid => {
        if (valid) {
          // 提交表单
          this.amenu.parentid = this.selectedOptions4Add[
            this.selectedOptions4Add.length - 1
          ];
          this.amenu.opentype = this.opentype;
          this.amenu.moduletype = this.moduletype;
          saveModule(this.amenu).then(res => {
            if (res.result === 1) {
              // 关闭窗口
              this.dialogAddVisible = false;
              this.$message({
                type: "success",
                message: "新增成功"
              });
              (this.amenu = {
                modulenm: "",
                nt: "",
                parentid: "",
                opentype: "",
                moduletype: "",
                url: "",
                icon: ""
              }),
                (this.selectedOptions4Add = []);
              this.fileList2 = [];
              // 刷新列表
              this.initList();
            }
          });
        }
      });
    },
    showEditForm(row) {
      this.emenu.modulenm = row.text;
      this.eopentype = +row.opentype;
      this.emoduletype = +row.moduletype;
      this.emenu.moduleid = row.id;
      this.emenu.url = row.url;
      this.emenu.icon = row.icon;
 
       this.selectedOptions4Edit = getPidArr(this.options4Edit,row.pid).reverse()
      if (row.icon) {
        this.efileList2 = [
          {
            name: "",
            url:
              this.dimg +'/'+ row.icon
          }
        ];
      } else {
        this.efileList2 = [];
      }
      // 显示表单
      this.dialogEditVisible = true;
    },
    submitMenu4Edit() {
      // 编辑提交菜单
      this.$refs["menuform4Edit"].validate(valid => {
        if (valid) {
          // 提交表单
          this.emenu.parentid = this.selectedOptions4Edit[
            this.selectedOptions4Edit.length - 1
          ];
          this.emenu.opentype = this.eopentype;
          this.emenu.moduletype = this.emoduletype;
          editModule(this.emenu).then(res => {
            if (res.result === 1) {
              // 关闭窗口
              this.dialogEditVisible = false;
              this.$message({
                type: "success",
                message: "编辑成功"
              });
              // 刷新列表
              this.initList();
            } else {
              this.$message({
                type: "error",
                message: "编辑失败"
              });
            }
          });
        }
      });
    },
    deleteHandler(id) {
      // 调用删除菜单接口
      editModule({ moduleid: id, delflag: "1" }).then(res => {
        if (res.result === 1) {
          this.initList();
          this.$message({
            type: "success",
            message: "删除成功"
          });
        }
      });
    },
    initList() {
      this.dataSource = [];
      this.options4Edit = [];
      getModules()
        .then(res => {
          this.dataSource=[res.result];
        })
        .catch(error => {
          this.$message({
            type: "info",
            message: "加载失败"
          });
        });
      getModules().then(res => {
        this.options4Edit=[res.result];
      });
    }
  },
  components: {
    TreeGrid
  },
  mounted() {
    this.initList();
  }
};
</script>
<style scoped>
.right {
  border: 1px solid #e7e7e7;
  box-shadow: 0 0 4px #e7e7e7;
  background: #fff;
  border-radius: 5px;
}
.nav-title {
  height: 50px;
  display: -ms-flexbox;
  display: flex;
  width: 98%;
  margin: 0 auto;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}
.nav-title span {
  display: inline-block;
  width: 0px;
  height: 18px;
  border-radius: 5px;
  border-left: 4px solid #3380f3;
}
.nav-title p {
  padding-left: 10px;
  font-weight: 600;
}
.dataList {
  padding: 10px;
  /* height: 610px; */
}
.from {
  height: 50px;
}
.from .el-form-item:last-child {
  position: absolute;
  right: 0.3rem;
}
.el-table {
  height: 400px;
  overflow: auto;
}
.el-pagination {
  margin-top: 0.1rem;
  text-align: center;
}
.el-cascader {
  width: 100%;
}
</style>
